<template>
   <page-layout>
       	<bread-crumb 
			slot="breadcrumb" 
			:breadCrumbitems="breadCrumbItems" />
        <template v-slot:pagecontent>
			<a-row style="background-color:#fff;">
				<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24" v-for="(item,index) in totalPage" style="padding:15px;" v-bind:key="index">
					<a-list item-layout="horizontal" :data-source="item.rows">
						<a-list-item slot="renderItem" slot-scope="item2, index2">
							<a-list-item-meta :description="item2.introduce">
      							<a slot="title">{{ item2.subTitle }}</a>
      							<img slot="avatar" :src="item2.imgA" alt="" />
      						</a-list-item-meta>
						</a-list-item>
					</a-list>
				</a-col>				
			</a-row>
		</template>
    </page-layout> 
</template>

<script>
import PageLayout from '@/layouts/PageLayout.vue'
import BreadCrumb from '@/components/BreadCrumb.vue' 
import {
    Row,
    Col,
    Statistic,
    Card,
    Avatar,
    List,
    Button,
    Divider
} from 'ant-design-vue'
import { mapState } from 'vuex'


export default {
    name:"home-markets-taobal",
    data(){
        return {
            msg:"",
            productList:[],
			totalPage:[]
        }
    },
    computed:{
        breadCrumbItems(){
            let routes = this.$route.matched	           
            return routes.map(function(item,index){
                return item.name;
            });
        }        
    },
    mounted(){
        this.$axios.get("http://localhost:8094/product/list").then((response,error)=>{         
            if(response.status===200){              
                this.productList=response.data;
                var totalPage=Math.ceil(this.productList.length/5)
                this.totalPage.length=0;
                for(var i=0;i<totalPage;i++){
					this.totalPage.push({
						pageIndex:i,
						rows:this.productList.slice(i*5,(i+1)*5-1)
					});
				}
            }
        })
    },
    components:{			
        PageLayout,
        BreadCrumb,
        ARow:Row,
        ACol:Col,
        AStatistic:Statistic,
        ACard:Card,
        ACardGrid:Card.Grid,
        ACardMeta:Card.Meta,
        AAvatar:Avatar,
        AList:List,
        AListItem:List.Item,
        AListItemMeta:List.Item.Meta,
        AButton:Button,
        ADivider:Divider,
        PageLayout
    }	
}
/**
 *	本页面要稍微了解一个知识点：created与mounted的区别
 *	created时：，官方解释说created是在实例创建完成后呗立即调用。在这一步，实例已完成以下配置：数据观测 (data observer)，
 *		属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
 *		这句话重点就是dom还没有形成，如果要手动操作dom不要在这里写。
 *	mounted:mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下：
 *		el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
 *		这里有个问题，使用mock数据几乎等同于同步数据，所以初始化数据放到了created中，这让我有个误解。
 *		安装作者的这个说法，异步请求还是要放到mounted中好一些。
 *		关于nextTick的用法与mounted有交叉点。
 */
</script>